<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/global.css">

    <style>
        .prize-container {
            position: relative;
        }

        .prize-container .prize-item,
        .prize-container .prize-turn {
            position: absolute;
            /* background-color: rgb(22, 185, 235); */
            width: 200px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            user-select: none;
            box-sizing: border-box;
        }

        .prize-container .prize-turn {
            background-color: #fff;
            cursor: pointer;
            border-radius: 50%;
            border: 1px solid rgb(209, 92, 92);
            font-size: 30px;
            transform: scale(.5, .5);
            color: rgb(209, 92, 92);
            transition: all .4s ease-in;
        }

        .prize-container .prize-item {
            border: 4px solid transparent;
        }

        .prize-container .prize-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .9;
        }

        .prize-container .prize-item>div {
            position: absolute;
            width: 100%;
            text-align: center;
            left: 0;
            font-weight: bold;
            color: beige;
            line-height: 30px;
            bottom: 0;
            background-color: rgba(0, 0, 0, .3);
        }


        .prize-container .prize-turn:active {
            background-color: rgb(209, 92, 92);
            color: #fff;
        }

        .prize-container .prize-item.active {
            border-color: #eb9c26;
        }
    </style>
</head>

<body>
    <div class="prize-container">
        <div class="prize-item" style="left: 0;top: 0;"></div>
        <div class="prize-item" style="left: 200px;top: 0;"></div>
        <div class="prize-item" style="left: 400px;top: 0;"></div>
        <div class="prize-item" style="left: 400px;top: 200px;"></div>
        <div class="prize-item" style="left: 400px;top: 400px;"></div>
        <div class="prize-item" style="left: 200px;top: 400px;"></div>
        <div class="prize-item" style="left: 0;top: 400px;"></div>
        <div class="prize-item" style="left: 0;top: 200px;"></div>
        <div class="prize-turn" style="left: 200px;top: 200px;">开始转动</div>
    </div>

    <script type="module"> 
        import { Maths, Randoms, Animation } from "https://unpkg.com/@3r/tool"
        // 获取所有的
        let prizeDomList = document.querySelectorAll('.prize-item')
        let prizeTurnDom = document.querySelector('.prize-turn')
        let startIndex = 0;
        let prizes = [
            {
                name: '苹果13',
                weight: 1,
                imgSrc: './assets/prizes/1.jpg'
            },
            {
                name: '兰博基尼5元优惠券',
                weight: 1000,
                imgSrc: './assets/prizes/2.jpg'
            },
            {
                name: '香港一日游满5000-5券',
                weight: 200,
                imgSrc: './assets/prizes/3.jpg'
            },
            {
                name: '王者荣耀绝美皮肤一套',
                weight: 200,
                imgSrc: './assets/prizes/4.jpg'
            },
            {
                name: '鼠标垫',
                weight: 200,
                imgSrc: './assets/prizes/5.webp'
            },
            {
                name: '再来一次',
                weight: 100,
                imgSrc: './assets/prizes/6.gif'
            },
            {
                name: '吹风机',
                weight: 20,
                imgSrc: './assets/prizes/7.webp'
            },
            {
                name: '扫地机器人',
                weight: 10,
                imgSrc: './assets/prizes/8.webp'
            },
        ]

        // 展示效果
        for (let i = 0; i < prizeDomList.length; i++) {
            const prizeItem = prizeDomList[i];
            const prizeText = document.createElement('div')
            const prizeImage = document.createElement('img')


            prizeText.textContent = prizes[i].name
            prizeImage.setAttribute("src", prizes[i].imgSrc)

            prizeItem.appendChild(prizeImage)
            prizeItem.appendChild(prizeText)
        }
        // 等待时间
        let waitTime = function (time) {
            return {
                then: function (resolve) {
                    setTimeout(resolve, time)
                }
            }
        }
        // 转动
        let turn = async function () {
            let offset = 1 / (prizes.length * 10) // 执行次数
            let interval = 200; // 延迟
            let minInterval = 50; // 最小延迟
            let endIndex = Randoms.getRandomIndexByWeight(prizes) // 随机结束奖品
            let lastDom = null
            for (let i = 0; i <= 1; i += offset) {
                // 延迟时间
                await waitTime(Math.max(Animation.easeIn(i) * interval, minInterval))
                lastDom?.classList?.remove('active');
                lastDom = prizeDomList.item(startIndex % prizeDomList.length)
                lastDom.classList.add('active')
                if (i > .9 && (startIndex % prizeDomList.length === endIndex)) break;
                startIndex++;
            }
            let name = prizes[endIndex].name

            setTimeout(() => {
                if (name == "再来一次")
                    alert(`请${name}吧~`)
                else
                    alert(`您获得了${name}`)
            }, interval);
        }

        prizeTurnDom.addEventListener("click", turn)    
    </script>
</body>

</html>